<template>
  <div>
    <el-tabs v-model="activeNewName" @tab-click="handleNewClick" type="card">
      <el-tab-pane label="客户" name="one">
        <el-row>
          <el-col :span="24">
            <el-form :model="queryEnterpriseParams" ref="queryFormEnterprise" size="small" :inline="true"
                     v-show="showSearch" label-width="100px">
              <el-form-item label="企业名称" prop="enterpriseName">
                <el-input v-model="queryEnterpriseParams.enterpriseName" placeholder="请输入企业名称" clearable
                          @keyup.enter.native="handleQueryEnterprise" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini"
                           @click="handleQueryEnterprise">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini"
                           @click="resetQueryEnterprise">重置</el-button>
                <el-button type="primary" size="mini" @click="saveSelectEnterprise">确定</el-button>
              </el-form-item>
            </el-form>
            <el-table ref="tableEnterprise" v-loading="loading" style="width: 100%"
                      @selection-change="handleSelectionChangeEnterprise" :data="infoList">
              <el-table-column type="selection" width="45" align="center" />
              <el-table-column label="企业名称" align="center" prop="enterpriseName" />
              <el-table-column label="联系人" align="center" prop="contacts" />
              <el-table-column label="联系电话" align="center" prop="telephone"
                               show-overflow-tooltip="true" />
            </el-table>
            <pagination v-show="total1 > 0" :total="total1" :page.sync="queryEnterpriseParams.pageNum"
                        :limit.sync="queryEnterpriseParams.pageSize" @pagination="getEnterpriseList" />
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="公海" name="two">
        <el-row>
          <el-col :span="24" :xs="24">
            <el-form :model="querySeasParams" ref="queryFormSeas" size="small" :inline="true"
                     v-show="showSearch" label-width="100px">
              <el-form-item label="企业名称" prop="enterpriseName">
                <el-input v-model="querySeasParams.enterpriseName" placeholder="请输入企业名称" clearable
                          @keyup.enter.native="handleQuerySeas" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini"
                           @click="handleQuerySeas">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuerySeas">重置</el-button>
                <el-button type="primary" size="mini" @click="saveSelectSeas">确定</el-button>
              </el-form-item>
            </el-form>

            <el-table ref="tableSeas" v-loading="loading" :data="seasList"
                      @selection-change="handleSelectionChangeSeas">
              <el-table-column type="selection" width="45" align="center" />
              <el-table-column label="企业名称" align="center" prop="enterpriseName" />
              <el-table-column label="联系人" align="center" prop="contacts" />
              <el-table-column label="联系电话" align="center" prop="telephone" />
            </el-table>
            <pagination v-show="total2 > 0" :total="total2" :page.sync="querySeasParams.pageNum"
                        :limit.sync="querySeasParams.pageSize" @pagination="getSeasList" />
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="电销" name="three">
        <el-row>
          <el-col :span="24" :xs="24">
            <el-form :model="queryEleParams" ref="queryFormEle" size="small" :inline="true"
                     v-show="showSearch" label-width="100px">
              <el-form-item label="企业名称" prop="enterpriseName">
                <el-input v-model="queryEleParams.enterpriseName" placeholder="请输入企业名称" clearable
                          @keyup.enter.native="handleQueryEle" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini"
                           @click="handleQueryEle">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQueryEle">重置</el-button>
                <el-button type="primary" size="mini" @click="saveSelectEle">确定</el-button>
              </el-form-item>
            </el-form>

            <el-table ref="tableEle" v-loading="loading" :data="electricList"
                      @selection-change="handleSelectionChangeEle">
              <el-table-column type="selection" width="45" align="center" />
              <el-table-column label="企业名称" align="center" prop="enterpriseName" />
              <el-table-column label="联系人" align="center" prop="contacts" />
              <el-table-column label="联系电话" align="center" prop="telephone" />
            </el-table>
            <pagination v-show="total3 > 0" :total="total3" :page.sync="queryEleParams.pageNum"
                        :limit.sync="queryEleParams.pageSize" @pagination="getEleList" />
          </el-col>
        </el-row>
      </el-tab-pane>
<!--      合作企业-->
<!--      <el-tab-pane label="合作企业" name="four">-->
<!--        <el-row>-->
<!--          <el-col :span="24" :xs="24">-->
<!--            <el-form :model="queryCollParams" ref="queryFormEle" size="small" :inline="true"-->
<!--                     v-show="showSearch" label-width="100px">-->
<!--              <el-form-item label="企业名称" prop="recipientName">-->
<!--                <el-input v-model="queryCollParams.recipientName" placeholder="请输入企业名称" clearable-->
<!--                          @keyup.enter.native="handleQueryColl" />-->
<!--              </el-form-item>-->
<!--              <el-form-item>-->
<!--                <el-button type="primary" icon="el-icon-search" size="mini"-->
<!--                           @click="handleQueryEle">搜索</el-button>-->
<!--                <el-button icon="el-icon-refresh" size="mini" @click="resetQueryEle">重置</el-button>-->
<!--                <el-button type="primary" size="mini" @click="saveColl">确定</el-button>-->
<!--              </el-form-item>-->
<!--            </el-form>-->

<!--            <el-table ref="tableColl" v-loading="loading" :data="collList"-->
<!--                      @selection-change="handleSelectionChangeColl">-->
<!--              <el-table-column type="selection" width="45" align="center" />-->
<!--              <el-table-column label="企业名称" align="center" prop="recipientName"-->
<!--                               :show-overflow-tooltip="true" />-->
<!--              <el-table-column label="企业联系人" align="center" prop="contacts" width="120"-->
<!--                               :show-overflow-tooltip="true" />-->
<!--              <el-table-column label="联系电话" align="center" prop="phone" width="120"-->
<!--                               :show-overflow-tooltip="true" />-->
<!--            </el-table>-->
<!--            <pagination v-show="total3 > 0" :total="total4" :page.sync="queryCollParams.pageNum"-->
<!--                        :limit.sync="queryCollParams.pageSize" @pagination="listManagement" />-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </el-tab-pane>-->
    </el-tabs>
  </div>
</template>
<script>
import { listSeas, getSeas } from "@/api/highSeas/seas";
import { listInfo, getInfo } from "@/api/enterprise/info";
import { listElectricPerson } from "@/api/electric/electric";
import {listManagement} from "@/api/collaborative/management";
export default {
  name:"changeEnter",
  data(){
    return{
      activeNewName: 'one',
      // 显示搜索条件
      showSearch: true,
      infoList: [],
      seasList: [],
      electricList: [],
      collList:[],

      // 选中数组
      eIds: [],
      sIds: [],
      eleIds:[],
      collIds:[],
      eName: [],
      sName: [],
      eleName:[],
      collName:[],
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      total1: 0,
      total2: 0,
      total3:0,
      total4:0,
      queryEnterpriseParams: {
        pageNum: 1,
        pageSize: 5,
        enterpriseName: null,
        markAs: '1',
        classificationId: null
      },
      querySeasParams: {
        pageNum: 1,
        pageSize: 5,
        enterpriseName: null,
        classificationId: null
      },
      queryEleParams: {
        pageNum: 1,
        pageSize: 5,
        enterpriseName: null,
        classificationId: null
      },
      queryCollParams: {
        pageNum: 1,
        pageSize: 5,
        recipientName: null,
        classificationId: null
      },
    }
  },
  created() {
    this.getEnterpriseList();
    this.getSeasList();
    this.getEleList();
    this.listManagement();
  },
  methods:{
    handleNewClick(tab, event) {
      if (tab.name == 'one') {
        this.$refs.tableSeas.clearSelection(); // 清空所有选择
      }
      if (tab.name == 'two') {
        this.$refs.tableEnterprise.clearSelection(); // 清空所有选择
      }
      if (tab.name == 'three') {
        this.$refs.tableEnterprise.clearSelection(); // 清空所有选择
      }
    },
    /** 搜索按钮操作 */
    handleQueryEnterprise() {
      this.queryEnterpriseParams.pageNum = 1;
      this.getEnterpriseList();
    },
    /** 搜索按钮操作 */
    handleQuerySeas() {
      this.querySeasParams.pageNum = 1;
      this.getSeasList();
    },
    /** 重置按钮操作 */
    resetQuerySeas() {
      this.resetForm("queryFormSeas");
      this.handleQuerySeas();
    },
    /** 搜索按钮操作 */
    handleQueryEle() {
      this.queryEleParams.pageNum = 1;
      this.getEleList();
    },
    handleQueryColl(){
      this.queryCollParams.pageNum=1;

    },
    /** 重置按钮操作 */
    resetQueryEle() {
      this.resetForm("queryFormEle");
      this.handleQueryEle();
    },
    getEnterpriseList() {
      this.loading = true;
      listInfo(this.queryEnterpriseParams).then(response => {
        this.infoList = response.rows;
        this.total1 = response.total;
        this.loading = false;
      });
    },
    getSeasList() {
      this.loading = true;
      listSeas(this.querySeasParams).then(response => {
        this.seasList = response.rows;
        this.total2 = response.total;
        this.loading = false;
      });
    },
    listManagement(){
      this.loading = true;
      listManagement(this.queryCollParams).then(res=>{
        this.collList = res.rows;
        this.total4 = res.total;
        this.loading = false;
      })
    },
    getEleList(){
      this.loading = true;
      listElectricPerson(this.queryEleParams).then(response => {
        this.electricList = response.rows;
        this.total3 = response.total;
        this.loading = false;
      });
    },

    /** 重置按钮操作 */
    resetQueryEnterprise() {
      this.resetForm("queryFormEnterprise");
      this.handleQueryEnterprise();
    },
    saveSelectSeas() {
      this.$emit('select-seas', {
        enterpriseName: this.sName.toString(),
        enterpriseId: this.sIds.toString()
      });
    },
    saveSelectEle() {
      this.$emit('select-ele', {
        enterpriseName: this.eleName.toString(),
        electricId: this.eleIds.toString()
      });
    },
    saveColl(){
      this.$emit('select-coll', {
        enterpriseName: this.collName.toString(),
        collId: this.collIds.toString()
      });
    },
    saveSelectEnterprise() {
      this.$emit('select-enterprise', {
        enterpriseName: this.eName.toString(),
        enterpriseId: this.eIds.toString()
      });
    },
    handleSelectionChangeSeas(selection) {
      if (selection.length > 1) {
        this.$refs.tableSeas.clearSelection(); // 清空所有选择
        this.$refs.tableSeas.toggleRowSelection(selection.pop()); // 设置选择项
      } else {
        this.sIds = selection.map(item => item.enterpriseId)
        this.sName = selection.map(item => item.enterpriseName)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      }
    },
    handleSelectionChangeEle(selection) {
      if (selection.length > 1) {
        this.$refs.tableEle.clearSelection(); // 清空所有选择
        this.$refs.tableEle.toggleRowSelection(selection.pop()); // 设置选择项
      } else {
        this.eleIds = selection.map(item => item.electricId)
        this.eleName = selection.map(item => item.enterpriseName)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      }
    },
    handleSelectionChangeColl(selection){
      if (selection.length > 1) {
        this.$refs.tableColl.clearSelection(); // 清空所有选择
        this.$refs.tableColl.toggleRowSelection(selection.pop()); // 设置选择项
      } else {
        this.collIds = selection.map(item => item.collaborativeId)
        this.collName = selection.map(item => item.recipientName)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      }
    },
    handleSelectionChangeEnterprise(selection) {
      if (selection.length > 1) {
        this.$refs.tableEnterprise.clearSelection(); // 清空所有选择
        this.$refs.tableEnterprise.toggleRowSelection(selection.pop()); // 设置选择项
      } else {
        this.eIds = selection.map(item => item.enterpriseId)
        this.eName = selection.map(item => item.enterpriseName)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      }
    },
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-table .el-table__header-wrapper .el-checkbox {
  display: none;
}

::v-deep .el-dialog__header {
  padding-top: 5px;
}
</style>
